<template>
  <div class="flex justify-center">
    <div class="mt-5 p-3 bg-white" style="width: 500px;">
      <div class="mb-2 text-center font-36 font-weight-bold ltsp-1">
        登录
      </div>
      <el-form
          label-position="right"
          label-width="100px"
          ref="loginFormRef"
          :model="form"
          :rules="rules"
          style="max-width: 460px"
      >
        <el-form-item label="用户名" prop="user">
          <el-input v-model="form.user" size="large"/>
        </el-form-item>
        <el-form-item label="密  码" prop="pwd">
          <el-input v-model="form.pwd" type="password" size="large"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()" size="large">
            登录
          </el-button>
          <el-button @click="$router.push('/reg')" size="large">去注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, getCurrentInstance} from 'vue'
import {post, get} from '@/utils/request'

const {proxy} = getCurrentInstance()
const form = ref({
  user: '',
  pwd: ''
})
const loginFormRef = ref()
const rules = reactive({
  user: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 3, max: 35, message: '用户名3位以上', trigger: 'blur'},
  ],
  pwd: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, max: 35, message: '密码6位以上', trigger: 'blur'},
  ],
})

const submitForm = () => {
  post('/user/login/', form.value, 'json').then(r => {
    console.log(r)
    if (r == 'Sucess') {
      proxy.$modal.success('登录成功。')
      proxy.$store.dispatch('Login', {user: form.value.user})
      proxy.$router.push('/')
    }
  })
}
</script>

<style scoped>

</style>
